<script type="text/javascript">
$(function(){
	var pg = App.soagov.svcTraceQuery.ui, pp = pg.params || {};

	var frm = {
		env: pg.seek('env'),
		addr: pg.seek('addr'),
		start: pg.seek('start'),
		end: pg.seek('end'),
		time: pg.seek('time'),
		status: pg.seek('status')
	}
	
	var tfw = frm.addr.width() + 2;
	
	frm.env.mac('combo', {
		width: tfw,
		boxWidth: tfw + 1,
		data: Cache.base.env('deploy')
	}).val(pp.env);
	
	frm.status.mac('combo', {
		width: tfw,
		boxWidth: tfw + 1,
		data: Cache.base.flow.status
	}).val(3);

	var instGd = $('<div class="grid"></div>').mac('grid', {
		key: 'id',
		cols : [{
			field: 'host', title : '实例地址', width: 140,
			render: function(r){
				return r.host + ':' + r.port;
			}
		},{
			field: 'code', title : '实例编号', width: 150
		},{
			field: 'name', title : '实例名称', width: 150
		}],
		loader: {
			url: App.soagov.ctx + '/app/inst/list.do',
			params: { pageNo: 1, pageSize: 50, env: pp.env },
			autoLoad: true
		},
		pagerLength: 10
	});
	frm.addr.mac('combo', {
		keyField: 'addr',
		displayField: 'addr',
		multiSelect: false,
		width: 450,
		boxLeft: 0,
		boxWidth: 450,
		boxHeight: 320,
		boxEl: instGd,
		onSelect: function(me, sk, sd){
			var r = sd[0] || {};
			frm.addr.text(r.addr);
		}
	});
	frm.addr.mac('combo_grid', {});
	
// 	var datepicker = {
// 		prevText: "<上一月",
// 		nextText: "下一月>",
// 		dateFormat: "yy-mm-dd",
// 		changeMonth: true,
// 		changeYear: true,
// 		inline: true
// 	}
// 	frm.start.datepicker(datepicker);
	frm.start.val(new Date().format('yyyy-MM-dd HH:mm:ss.SSS'));
// 	pg.seek('cal0').click(function(){
// 		frm.start.datepicker('show');
// 	});
// 	frm.hour0.val(0);
// 	frm.minute0.val(0);
// 	frm.second0.val(0);
	//
// 	frm.end.datepicker(datepicker);
	frm.end.val(new Date().format('yyyy-MM-dd HH:mm:ss.SSS'));
// 	pg.seek('cal1').click(function(){
// 		frm.end.datepicker('show');
// 	});
// 	frm.hour1.val(0);
// 	frm.minute1.val(0);
// 	frm.second1.val(0);
	
	function getValues(){
		return {
			env: frm.env.val(),
			addr: frm.addr.val(),
			start: frm.start.val(),
			end: frm.end.val(),
			time: frm.time.val(),
			status: frm.status.val()
		};
	}
	function setValues(o){
		frm.env.val(o.env);
		frm.addr.val(o.addr);
		frm.start.val(o.start);
		frm.end.val(o.end);
		frm.time.val(o.time);
		frm.status.val(o.status)
	}
	
	function validate(p){
// 		var msg=pg.seek('msg');
// 		msg.html('');
// 		var x = App.validate, v = App.soagov.validation, va = App.base.validation;
// 		return x(v.face.code, p.code, msg, '编号') &&
// 			   x(v.face.name, p.name, msg, '名称') &&
// 			   x(v.face.face, p.face, msg, '接口') &&
// 			   x(va.face.ver, p.ver, msg, '版本号');
	}
// 	$("input").blur(function(){
// 		var pms = getValues();
//  		if(!validate(pms))
//  			return;
// 	});
	pg.seek('ok').click(function(){
		var pms = getValues();
		pg.callback(pms);
		return false;
	});
	pg.seek('close').click(pg.close);
	
	setValues(pp);
});
</script>
<div class="form">
	<div class="item">
		<div class="label">所属环境</div>
		<div class="value">
			<div class="combo fl" name="env"></div>
		</div>
		<div class="label">实例地址</div>
		<div class="value">
			<input type="text" name="addr" />
		</div>
		<div class="clear"></div>
	</div>
	<div class="item">
		<div class="label">服务耗时</div>
		<div class="value">
			<input type="text" name="trace" />
		</div>
		<div class="label">执行状态</div>
		<div class="value">
			<div class="combo" name="status" />
		</div>
		<div class="clear"></div>
	</div>
	<div class="item">
		<div class="label">开始时间</div>
		<div class="value">
			<input type="text" name="start" />
		</div>
		<div class="label">结束时间</div>
		<div class="value">
			<input type="text" name="end" />
		</div>
		<div class="clear"></div>
	</div>
<!-- 	<div> -->
<!-- 		<div class="label">开始时间：</div> -->
<!-- 		<input type="text" name="date" class="long" /> -->
<!-- 		<div class="calendar" name="cal0"></div> -->
<!-- 		<input name="hour0" min="00" max="23" class="short" value="00" type="number" placeholder="时"/> -->
<!-- 		<span>:</span> -->
<!-- 		<input name="minute0" min="00" max="59" class="short" value="00" type="number" placeholder="分"/> -->
<!-- 		<span>:</span> -->
<!-- 		<input name="second0" min="00" max="59" class="short" value="00" type="number" placeholder="秒"/> -->
<!-- 	</div> -->
<!-- 	<div> -->
<!-- 		<div class="label">结束时间：</div> -->
<!-- 		<input type="text" name="end" class="long" /> -->
<!-- 		<div class="calendar" name="cal1"></div> -->
<!-- 		<input name="hour1" min="00" max="23" class="short" value="00" type="number" placeholder="时"/> -->
<!-- 		<span>:</span> -->
<!-- 		<input name="minute1" min="00" max="59" class="short" value="00" type="number" placeholder="分"/> -->
<!-- 		<span>:</span> -->
<!-- 		<input name="second1" min="00" max="59" class="short" value="00" type="number" placeholder="秒"/> -->
<!-- 	</div> -->
	<div class="item">
		<span class="label">&nbsp;</span>
		<div name="msg" class="msg"></div>
		<div class="clear"></div>
	</div>
	<div class="bottom">
		<button name="ok">确定</button>
		&nbsp;&nbsp;
		<button name="close">取消</button>
	</div>
</div>